import React from 'react';
import styles from './index.module.less';
import { Link } from 'react-router-dom';


class HighQualityRecommended extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [
        { logo: require('../../../asset/images/high/highLogo1.png'), title: '大连塑料有限公司1', city: '大连市1', img1: require('../../../asset/images/high/high1.png'), img2: require('../../../asset/images/high/high2.png'), img3: require('../../../asset/images/high/high3.png'), num: 111111, totle: 100, price1: 1200, price2: 1300, price3: 1400 },
        { logo: require('../../../asset/images/high/highLogo2.png'), title: '大连塑料有限公司2', city: '大连市2', img1: require('../../../asset/images/high/high4.png'), img2: require('../../../asset/images/high/high5.png'), img3: require('../../../asset/images/high/high6.png'), num: 111111, totle: 100, price1: 1200, price2: 1300, price3: 1400 },
        { logo: require('../../../asset/images/high/highLogo3.png'), title: '大连塑料有限公司3', city: '大连市3', img1: require('../../../asset/images/high/high7.png'), img2: require('../../../asset/images/high/high8.png'), img3: require('../../../asset/images/high/high9.png'), num: 333333, totle: 300, price1: 33300, price2: 1200, price3: 1400 },
        { logo: require('../../../asset/images/high/highLogo1.png'), title: '大连塑料有限公司4', city: '大连市4', img1: require('../../../asset/images/high/high1.png'), img2: require('../../../asset/images/high/high2.png'), img3: require('../../../asset/images/high/high3.png'), num: 222222, totle: 200, price1: 2200, price2: 2300, price3: 2400 },
        { logo: require('../../../asset/images/high/highLogo2.png'), title: '大连塑料有限公司5', city: '大连市5', img1: require('../../../asset/images/high/high4.png'), img2: require('../../../asset/images/high/high5.png'), img3: require('../../../asset/images/high/high6.png'), num: 333333, totle: 300, price1: 33300, price2: 1200, price3: 1400 },
        { logo: require('../../../asset/images/high/highLogo3.png'), title: '大连塑料有限公司6', city: '大连市6', img1: require('../../../asset/images/high/high7.png'), img2: require('../../../asset/images/high/high8.png'), img3: require('../../../asset/images/high/high9.png'), num: 333333, totle: 300, price1: 33300, price2: 1200, price3: 1400 },
        { logo: require('../../../asset/images/high/highLogo1.png'), title: '大连塑料有限公司7', city: '大连市7', img1: require('../../../asset/images/high/high1.png'), img2: require('../../../asset/images/high/high2.png'), img3: require('../../../asset/images/high/high3.png'), num: 333333, totle: 300, price1: 33300, price2: 1200, price3: 1400 },
        { logo: require('../../../asset/images/high/highLogo2.png'), title: '大连塑料有限公司8', city: '大连市8', img1: require('../../../asset/images/high/high4.png'), img2: require('../../../asset/images/high/high5.png'), img3: require('../../../asset/images/high/high6.png'), num: 333333, totle: 300, price1: 33300, price2: 1200, price3: 1400 },
        { logo: require('../../../asset/images/high/highLogo2.png'), title: '大连塑料有限公司8', city: '大连市8', img1: require('../../../asset/images/high/high7.png'), img2: require('../../../asset/images/high/high8.png'), img3: require('../../../asset/images/high/high9.png'), num: 333333, totle: 300, price1: 33300, price2: 1200, price3: 1400 },
      ],
      picList: [
        { pic: require('../../../asset/images/high/you1.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3100 },
        { pic: require('../../../asset/images/high/you2.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3200 },
        { pic: require('../../../asset/images/high/you3.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3300 },
        { pic: require('../../../asset/images/high/you4.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3400 },
        { pic: require('../../../asset/images/high/you5.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3500 },
        { pic: require('../../../asset/images/high/you6.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3600 },
        { pic: require('../../../asset/images/high/you1.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3100 },
        { pic: require('../../../asset/images/high/you2.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3200 },
        { pic: require('../../../asset/images/high/you3.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3300 },
        { pic: require('../../../asset/images/high/you4.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3400 },
        { pic: require('../../../asset/images/high/you5.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3500 },
        { pic: require('../../../asset/images/high/you6.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3600 },
      ],
    };
  }
  timer = null;
  // 优品推荐
  handleNext=() => {
    this.startRun();
  };
  handlePrev=() => {
    this.startRun1();
  }
  // 好商推荐
  handleList=() => {
    this.startRun2();
  };
  // 优品推荐(右箭头)
  startRun = () => {
    this.setState(prevState => {
      const { picList } = prevState;

      const header = picList.shift();

      picList.push(header);

      return {
        picList,
      };
    });
  };
  // 优品推荐(左箭头)
  startRun1=() => {
    this.setState(prevState => {
      const { picList } = prevState;
      const last = picList.pop();
      picList.unshift(last);
      return {
        picList,
      };
    });
  }

  // 好商推荐
  startRun2 = () => {
    this.setState(prevState => {
      const { list } = prevState;
      // console.log(list);
      const b = list.splice(0, 3);
      // console.log(b);
      let i;
      for (i = 0; i < b.length; i++) {
        list.push(b[i]);
      }
      console.log(list);
      return { list };
    });
  };

  render() {
    const { list, picList } = this.state;
    return (
      <div className={styles.HighQualityRecommended + ' ' + styles.clearfix}>
        <div className={styles.header}>
          <span className={styles.text }></span>
          <span className={styles.center}>优质推荐</span>
          <span className={styles.right}>High quality recommended</span>
        </div>
        {/* 好商推荐 */}
        <div className={styles.title}>
          <div className={styles.text}>—— 好商推荐 ——</div>
          <div className={styles.right}>
            <div onClick={this.handleList} className={styles.active}>换一批</div>
            <div style={{ margin: '0 5px' }}>|</div>
            <div className={styles.active}><Link to='/trading-market-user'>更多</Link></div>
            <div style={{ margin: '0 5px' }}>></div>
          </div>
        </div>
        <div className={styles.contentBox} >
          {list.map((item, index) => {
            return (
              <div className={styles.contentBoxLeft} key={index}>
                <div className={styles.BoxLeft + ' ' + styles.pullLeft}>
                  <div className={styles.contentTopBox}>
                    <div className={styles.contentLeft + ' ' + styles.pullLeft}>
                      <Link to="/commercial-tenant/shop-index"><img src={item.logo} alt=""/></Link>
                    </div>
                    <div className={styles.contentCenter + ' ' + styles.pullLeft}>
                      <div className={styles.contentCenter1}><Link to="/commercial-tenant/shop-index">{item.title}</Link></div>
                      <div className={styles.contentCenter2}>
                        <button className={styles.contentCenter2Btn1}>企业认证</button>
                        <button className={styles.contentCenter2Btn2}>货源优质</button>
                      </div>
                    </div>
                    <div className={styles.contentRight + ' ' + styles.pullRight}>
                      <div><i className={`iconfont icon-dz-dingwei ${styles.icon}`}></i>{item.city}</div>
                    </div>
                  </div>
                  <div className={styles.contentBottomBox}>
                    <div className={styles.contentBottomBoxLeft + ' ' + styles.pullLeft}>
                      <div className={styles.contentBottomBoxLeftTop} to='/'>
                        <Link to='/commercial-tenant/product-details'><img src={item.img1} alt=""/></Link>
                        <div className={styles.contentBottomBoxLeftTop2}>{item.price1}元/吨</div>
                      </div>
                      <div className={styles.contentBottomBoxLeftBottom}>
                        <div className={styles.d1}>
                          <span>{item.num}</span>
                          <span>{item.totle}件</span>
                        </div>
                        <div className={styles.d2}>
                          <span>销售量</span>
                          <span>共商品</span>
                        </div>
                      </div>
                    </div>
                    <div className={styles.contentBottomBoxCenter + ' ' + styles.pullLeft}>
                      <div className={styles.contentBottomBoxCenterTop1}>
                        <Link to='/commercial-tenant/product-details'><img src={item.img2} alt=""/></Link>
                        <div className={styles.contentBottomBoxCenterTop2}>{item.price2}元/吨</div>
                      </div>
                      <div className={styles.contentBottomBoxCenterTop3} to='/'>
                        <Link to='/commercial-tenant/product-details'><img src={item.img3} alt=""/></Link>
                        <div className={styles.contentBottomBoxCenterTop2}>{item.price3}元/吨</div>
                      </div>
                    </div>
                    <div>
                      <button className={styles.contentBottomBoxRight + ' ' + styles.pullLeft}>
                        <Link to="/commercial-tenant/shop-index"> 进<br/>入<br/>店<br/>铺<br/></Link>
                      </button>
                    </div>
                  </div>
                </div>
                <div className={styles.BoxRight}></div>
              </div>
            );
          })}
        </div>
        {/* 优品推荐 */}
        <div className={styles.title}>
          <div className={styles.text}>—— 优品推荐 ——</div>
          <div className={styles.right}>
            <div className={styles.active}>更多</div>
            <div style={{ margin: '0 5px' }}>></div>
          </div>
        </div>
        <div className={styles.contentBox2}>
          <div className={styles.contentImgsBtn1 + ' ' + styles.pullLeft } >
            <i className={`iconfont icon-zuojiantou ${styles.icon}`} onClick={this.handlePrev}></i>
          </div>
          <div className={styles.contentImgsBox + ' ' + styles.pullLeft}>
            {picList.map((item, index) => {
              return (
                <div key={index} className={styles.ImgBox + ' ' + styles.pullLeft}>
                  <div className={styles.contentImgs} >
                    <Link to="/"><img src={item.pic} alt=""/></Link>
                    <Link className={styles.contentImgsText} to="/">
                      <div>库存:12.56吨</div>
                    </Link>
                  </div>
                  <div className={styles.contentImgsTitle}>
                    <Link to="/">{item.title}</Link>
                  </div>
                  <div className={styles.contentImgsTitle2}>
                    <span className={styles.contentImgsAddress}>{item.city}</span>
                    <span className={styles.contentImgsPrice}>{item.price}元/吨</span>
                  </div>
                </div>
              );
            })}
          </div>
          <div className={styles.contentImgsBtn2 + ' ' + styles.pullLeft}>
            <i className={`iconfont icon-youjiantou1 ${styles.icon}`} onClick={this.handleNext}></i>
          </div>
        </div>
      </div>
    );
  }
}

export default HighQualityRecommended;
